<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>云创云盘 - 上传文件管理</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description"
          content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min.css?v=3.3.7" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">

    <script src="js/axios.min.js"></script>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        input[type=file] {
            display: none;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 120px;
            height: 120px;
            line-height: 120px;
            text-align: center;
        }

        .el-dropdown-link {
            cursor: pointer;
            color: #409EFF;
        }

        .el-icon-arrow-down {
            font-size: 12px;
        }

        .avatar {
            width: 120px;
            height: 120px;
            display: block;
        }
    </style>
</head>

<body class="gray-bg">
<div id="app" class="wrapper wrapper-content  animated fadeInRight">
    <div class="row">
        <div class="col-sm-8">
            <div class="ibox">
                <div class="ibox-content">
                    <span class="text-muted small pull-right">最后更新：<i
                            class="fa fa-clock-o"></i> 2015-09-01 12:00</span>
                    <h2>上传文件管理</h2>
                    <div class="input-group">
                        <el-upload
                                class="upload-demo"
                                action="http://localhost:80/file/uploadFiles"
                                multiple
                                :on-remove="removeFile">
                            <!--                                :file-list="fileList">-->
                            <el-button size="small" type="primary">点击上传</el-button>
                        </el-upload>
                    </div>
                    <div class="clients-list">
                        <ul class="nav nav-tabs">
                        </ul>
                        <div class="tab-content">
                            <div id="tab-1" class="tab-pane active">
                                <div class="full-height-scroll">
                                    <div class="table-responsive">
                                        <template>
                                            <el-row>
                                                <el-table :data="tableData" style="width: 100%">
                                                    <el-table-column prop="fileName" label="文件名" width="250">
                                                    </el-table-column>
                                                    <el-table-column prop="fileSize" label="大小" width="180">
                                                    </el-table-column>
                                                    <el-table-column prop="createTime" label="创建时间">
                                                    </el-table-column>
                                                    <el-table-column
                                                            fixed="right"
                                                            label="操作"
                                                            width="100">
                                                        <template slot-scope="scope">
                                                            <el-button @click="handleClick(scope.row)" type="text"
                                                                       size="small">下载
                                                            </el-button>
                                                        </template>
                                                    </el-table-column>
                                                </el-table>
                                            </el-row>
                                        </template>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="ibox ">

                <div class="ibox-content">
                    <div class="tab-content">
                        <div id="contact-1" class="tab-pane active">
                            <div class="row m-b-lg">
                                <div class="col-lg-4 text-center">
                                    <h2 v-model="userName">{{ userName }}</h2>
                                    <div class="m-b-sm">
                                        <img alt="image" class="img-circle" :src="circleUrl" style="width: 62px">
                                    </div>
                                    <div>
                                        <el-dropdown>
                                              <span class="el-dropdown-link">
                                                更多操作<i class="el-icon-arrow-down el-icon--right"></i>
                                              </span>
                                            <el-dropdown-menu slot="dropdown">
                                                <el-dropdown-item @click.native="dropdownMethod()">修改信息
                                                </el-dropdown-item>
                                                <el-dropdown-item @click.native="centerDialogVisible = true">修改头像
                                                </el-dropdown-item>
                                            </el-dropdown-menu>
                                        </el-dropdown>
                                    </div>
                                </div>
                                <div>
                                    <el-button style="margin-left: 150px" size="small" @click="loginOut()">退出登录
                                    </el-button>
                                </div>
                            </div>
                            <div class="client-detail">
                                <div class="full-height-scroll">

                                    <strong>当前动态</strong>

                                    <ul class="list-group clear-list">
                                        <li class="list-group-item fist-item">
                                            <span class="pull-right"> 09:00</span> 请联系我
                                        </li>
<!--                                        <li class="list-group-item">-->
<!--                                            <span class="pull-right"> 10:16 </span> 签合同-->
<!--                                        </li>-->
<!--                                        <li class="list-group-item">-->
<!--                                            <span class="pull-right"> 08:22 </span> 开新公司-->
<!--                                        </li>-->
<!--                                        <li class="list-group-item">-->
<!--                                            <span class="pull-right"> 11:06 </span> 打电话给李四-->
<!--                                        </li>-->
                                    </ul>
                                    <strong>备注</strong>
                                    <p>
                                        40亿影帝黄渤先生明明可以靠脸吃饭，可是他却偏偏靠才华，唱歌居然也这么好听！
                                    </p>
                                    <hr/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <el-dialog :modal-append-to-body="false" :rules="rules" title="修改信息" width="35%"
               :visible.sync="dialogFormVisible">
        <el-form :model="ruleForm" status-icon hide-required-asterisk="false" :rules="rules" ref="ruleForm"
                 label-width="80px" class="demo-ruleForm">
            <el-form-item label="用户账号" prop="userAccount">
                <el-input v-model="ruleForm.userAccount"></el-input>
            </el-form-item>
            <el-form-item label="用户昵称" prop="userName">
                <el-input v-model="ruleForm.userName"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
                <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电话" prop="phone">
                <el-input v-model="ruleForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="ruleForm.email"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即修改</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
                <el-button @click="dialogFormVisible = false">取 消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <el-dialog
            :modal-append-to-body="false"
            title="提示"
            :visible.sync="centerDialogVisible"
            width="20%"
            center="true">
        <span>
            <span>上传头像</span>
            <el-upload
                    class="avatar-uploader"
                    action="/user/upload"
                    :on-success="handleAvatarSuccess"
                    :show-file-list="false">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
        </span>
    </el-dialog>

</div>

<!-- 全局js -->
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.7"></script>

<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>

<!-- 自定义js -->
<script src="js/content.js?v=1.0.0"></script>

<script>
    $(function () {
        $('.full-height-scroll').slimScroll({
            height: '100%'
        });
    });
</script>

<script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>

<!--<script>-->
<!--    new Vue({-->
<!--        el: '#app',-->
<!--        data() {-->
<!--            var validatePass = (rule, value, callback) => {-->
<!--                console.log(value);-->
<!--                if (value === '') {-->
<!--                    callback(new Error('请输入密码'));-->
<!--                } else {-->
<!--                    if (this.checkPass !== '') {-->
<!--                        this.$refs.ruleForm.validateField('checkPass');-->
<!--                    } else if (value.length < 6 || value.length > 8) {-->
<!--                        callback(new Error('密码必须 6 到 8 位！'));-->
<!--                    }-->
<!--                    callback();-->
<!--                }-->
<!--            };-->
<!--            var validatePass2 = (rule, value, callback) => {-->
<!--                if (value === '') {-->
<!--                    callback(new Error('请再次输入密码'));-->
<!--                } else if (value !== this.ruleForm.password) {-->
<!--                    callback(new Error('两次输入密码不一致!'));-->
<!--                } else {-->
<!--                    callback();-->
<!--                }-->
<!--            };-->
<!--            return {-->
<!--                circleUrl: "",-->
<!--                userName: "",-->
<!--                tableData: [],-->
<!--                dialogFormVisible: false,-->
<!--                formLabelWidth: '120px',-->
<!--                centerDialogVisible: false,-->
<!--                checkPass: '',-->
<!--                imageUrl: '',-->
<!--                // fileList: [],-->
<!--                ruleForm: {-->
<!--                    userAccount: '',-->
<!--                    userName: '',-->
<!--                    password: '',-->
<!--                    phone: '',-->
<!--                    email: '',-->
<!--                },-->
<!--                rules: {-->
<!--                    username: [-->
<!--                        {required: true, message: '请输入用户名', trigger: 'blur'}-->
<!--                    ],-->
<!--                    phone: [-->
<!--                        {required: true, message: '请输入电话', trigger: 'blur'}-->
<!--                    ],-->
<!--                    userEmail: [-->
<!--                        {required: true, message: '请输入邮箱', trigger: 'blur'},-->
<!--                        {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}-->
<!--                    ],-->
<!--                    password: [-->
<!--                        {validator: validatePass, trigger: 'blur'}-->
<!--                    ],-->
<!--                    checkPass: [-->
<!--                        {validator: validatePass2, trigger: 'blur'}-->
<!--                    ],-->
<!--                }-->
<!--            };-->
<!--        },-->
<!--        methods: {-->
<!--            // 上传头像-->
<!--            handleAvatarSuccess(res, file) {-->
<!--                this.imageUrl = URL.createObjectURL(file.raw);-->
<!--                this.getUserMessage();-->
<!--            },-->
<!--            dropdownMethod() {-->
<!--                this.dialogFormVisible = true;-->
<!--                axios.get('http://localhost:80/user/currentUser')-->
<!--                    .then(response => {-->
<!--                        this.ruleForm.userAccount = response.data.data.userAccount;-->
<!--                        this.ruleForm.userName = response.data.data.userName;-->
<!--                        this.ruleForm.password = response.data.data.password;-->
<!--                        this.ruleForm.phone = response.data.data.phone;-->
<!--                        this.ruleForm.email = response.data.data.email;-->
<!--                        console.log(this.tableData);-->
<!--                    })-->
<!--                    .catch(error => {-->
<!--                        console.error('获取服务器数据时出错：', error);-->
<!--                    });-->
<!--            },-->
<!--            fetchServerData() {-->
<!--                axios.get('http://localhost:80/file/getAllFiles')-->
<!--                    .then(response => {-->
<!--                        this.tableData = response.data.data;-->
<!--                        console.log(this.tableData);-->
<!--                    })-->
<!--                    .catch(error => {-->
<!--                        console.error('获取服务器数据时出错：', error);-->
<!--                    });-->
<!--            },-->
<!--            getUserMessage() {-->
<!--                axios.get('http://localhost:80/user/getUserMessage')-->
<!--                    .then(response => {-->
<!--                        console.log(response.data);-->
<!--                        this.circleUrl = response.data.data.avatar;-->
<!--                        this.userName = response.data.data.userName;-->
<!--                    })-->
<!--                    .catch(error => {-->
<!--                        console.error('获取服务器数据时出错：', error);-->
<!--                    });-->
<!--            },-->
<!--            loginOut() {-->
<!--                axios.get('http://localhost:80/user/loginOut')-->
<!--                    .then(response => {-->
<!--                        var code = response.data.code;-->
<!--                        var message = response.data.message;-->
<!--                        if (code == 2000) {-->
<!--                            this.$message({-->
<!--                                message: message,-->
<!--                                type: 'success',-->
<!--                            })-->
<!--                            setTimeout(function () {-->
<!--                                window.location.href = "/login.html";-->
<!--                            }, 1200);-->
<!--                        }-->
<!--                    })-->
<!--                    .catch(error => {-->
<!--                        console.error('获取服务器数据时出错：', error);-->
<!--                    });-->
<!--            },-->
<!--            // // 文件上传-->
<!--            // removeFile() {-->
<!--            //     this.$refs.upload.clearFiles()-->
<!--            // },-->
<!--            // 提交表单信息-->
<!--            submitForm(formName) {-->
<!--                this.$refs[formName].validate((valid) => {-->
<!--                    if (valid) {-->
<!--                        axios.post("http://localhost:80/user/update", this.ruleForm)-->
<!--                            .then(response => {-->
<!--                                console.log(response.data);-->
<!--                                var code = response.data.code;-->
<!--                                var message = response.data.message;-->
<!--                                if (code === 2000) {-->
<!--                                    this.$message({-->
<!--                                        message: message,-->
<!--                                        type: 'success'-->
<!--                                    })-->
<!--                                    setTimeout(function(){-->
<!--                                        window.location.href = "/login.html";-->
<!--                                    }, 1200);-->
<!--                                } else {-->
<!--                                    this.$message({-->
<!--                                        message: message,-->
<!--                                        type: 'error'-->
<!--                                    })-->
<!--                                }-->
<!--                            })-->
<!--                    } else {-->
<!--                        console.log('error submit!!');-->
<!--                        return false;-->
<!--                    }-->
<!--                });-->
<!--                this.dialogFormVisible = false-->
<!--            },-->
<!--            // 文件下载-->
<!--            handleClick(row) {-->
<!--                console.log(row); // 获取文件信息-->
<!--                console.log(row.fileName);-->
<!--                // axios.get('http://localhost:80/file/downloadFile?fileName=' + row.fileName)-->
<!--                //     .catch(error => {-->
<!--                //         console.error('获取服务器数据时出错：', error);-->
<!--                //     });-->
<!--                axios({-->
<!--                    url: 'http://localhost:80/file/downloadFile',-->
<!--                    method: 'GET',-->
<!--                    responseType: 'blob',-->
<!--                    params: {-->
<!--                        fileName: row.fileName-->
<!--                    }-->
<!--                }).then(response => {-->
<!--                    //创建Blob对象-->
<!--                    const blob = new Blob([response.data]);-->
<!--                    //创建对象URL-->
<!--                    const url = URL.createObjectURL(blob);-->
<!--                    //创建a标签-->
<!--                    const link = document.createElement('a');-->
<!--                    link.href = url;-->
<!--                    link.download = row.fileName;-->
<!--                    //触发点击-->
<!--                    document.body.appendChild(link);-->
<!--                    link.click();-->
<!--                    //释放内存-->
<!--                    URL.revokeObjectURL(url);-->
<!--                })-->
<!--            },-->
<!--            httprequest(param) {-->
<!--                //拷贝图片到表单数据之中-->
<!--                this.ruleForm.file = param.file-->
<!--            },-->
<!--            // 重置表单信息-->
<!--            resetForm(formName) {-->
<!--                this.$refs[formName].resetFields();-->
<!--            },-->
<!--            // 显示头像-->
<!--            hanchange(file) {-->
<!--                //显示图片-->
<!--                this.ruleForm.imageUrl = URL.createObjectURL(file.raw);-->
<!--                console.log(this.ruleForm.imageUrl);-->
<!--            },-->
<!--        },-->
<!--        created() {-->
<!--            // 当组件创建时获取服务器数据-->
<!--            this.interval = setInterval(() => {-->
<!--                this.fetchServerData()-->
<!--                // this.removeFile()-->
<!--                console.log("定时器...")-->
<!--            }, 2000)-->
<!--            this.fetchServerData();-->
<!--            this.getUserMessage();-->
<!--        },-->
<!--        beforeDestroy() {-->
<!--            clearInterval(this.interval)-->
<!--        }-->
<!--    })-->
<!--</script>-->

</body>

</html>
